<template>
  <div class="cart">
    <Cartheader>
      <!-- 具名卡槽 -->
      <template v-slot:headname>购物车</template>
    </Cartheader>
    <div class="cart-main">
      <div class="cart-list" v-for="(item,index) in checkout" :key="item.title">
        <div class="cart-check fl">
          <span @click="check(index)" v-if="item.check" class="icheck iconfont icon-check"></span>
          <span @click="check(index)" v-else class="icheck2 iconfont icon-weixuanyuanquan"></span>
        </div>
        <div class="cart-img fl">
          <img :src="item.img" alt />
        </div>
        <div class="cart-title fr">
          <p v-cloak>{{item.title}}</p>
          <div class="pri">
            <div class="price">
              <div class="shopp-Price" v-cloak>￥{{item.prices}}</div>
              <div class="shopp-number">
                <div class="number-plus" @click="plus(index)">-</div>
                <input type="Number" v-model="item.data" class="number-input" />
                <div class="number-reduce" @click="reduce(index)">+</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-bottom">
      <div class="cart-dibu">
        <span class="heji">合计：</span>
        <span class="jiage">￥{{heji()}}</span>
        <div class="btn fr" ref="jiesuan" :style="{backgroundColor:bgc}">去结算</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
const Cartheader = () => import("@/components/Cart-header.vue");
export default {
  data() {
    return {
      bgc: "",
      checkout: [
        {
          check: true,
          img:
            "https://cdn.huaduocai.net//Storage/Shop/1/GoodsPropertyValues/9619796632735502.jpg",
          title: "锦瑟年华",
          prices: 1393,
          data: 1
        },
        {
          check: true,
          img:
            "https://cdn.huaduocai.net/Storage/Shop/1/GoodsPropertyValues/10267452189842628.jpg",
          title: "甜蜜之语",
          prices: 1393,
          data: 1
        }
      ]
    };
  },
  methods: {
    check(index) {
      this.checkout[index].check = !this.checkout[index].check;
    },
    plus(index) {
      if (this.checkout[index].data <= 1) {
        Dialog.confirm({
          title: "提示",
          message: "你确定要删除吗？"
        })
          .then(() => {
            this.checkout.splice(index, 1);
          })
          .catch(() => {});
      } else {
        this.checkout[index].data--;
      }
    },
    reduce(index) {
      this.checkout[index].data++;
    },
    heji() {
      let sum = 0;
      let arr = [];
      this.checkout.forEach(item => {
        if (item.check) {
          sum += item.prices;
        } else {
          arr.push(1);
        }
      });
      //疑问2：为什么jiesuan.style.backgroundColor = "#58bc58";会报错
      //   window.console.log(arr.length);
      //   let jiesuan = this.$refs.jiesuan;
      if (arr.length == this.checkout.length) {
        // jiesuan.style.backgroundColor = "#ccc";
        this.bgc = "#ccc";
      } else {
        // jiesuan.style.backgroundColor = "#58bc58";
        this.bgc = "";
      }
      return sum;
    }
  },
  computed: {
    heji1() {
      let sum = 0;
      let arr = [];
      this.checkout.forEach(item => {
        if (item.check) {
          sum += item.prices;
        } else {
          arr.push(1);
        }
      });
      //疑问1：如果放在计算属性，给bgc设置颜色，为什么不行，在方法中可以
      //   window.console.log(arr.length);
      //   //   let jiesuan = this.$refs.jiesuan;
      //   if (arr.length == this.checkout.length) {
      //     // jiesuan.style.backgroundColor = "#ccc";
      //     this.bgc = "#ccc";
      //   } else {
      //     // jiesuan.style.backgroundColor = "#58bc58";
      //     this.bgc = "";
      //   }
      return sum;
    }
  },
  components: {
    Cartheader
  }
};
</script>
<style scoped lang="scss">
@function vw($px) {
  @return ($px / 375) * 100vw;
}
.cart {
  .cart-main {
    .cart-list {
      padding: vw(10) vw(15);
      background-color: #fff;
      border-top: 1px solid #f7f7f7;
      height: vw(104.8);
      .cart-check {
        height: 100%;
        display: flex;
        align-items: center;
        .icheck {
          font-size: vw(22);
          border-radius: 50%;
          color: #f46;
        }
        .icheck2 {
          font-size: vw(22);
          border-radius: 50%;
          color: #333;
        }
      }
      .cart-img {
        margin-left: vw(15);
        img {
          width: vw(100);
          height: vw(100);
        }
      }
      .cart-title {
        font-size: vw(15);
        position: relative;
        width: vw(193);
        height: 100%;
        .pri {
          width: vw(193);
          position: absolute;
          left: 0;
          bottom: 0;
          .price {
            height: vw(32);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .shopp-Price {
              width: vw(55);
              height: vw(24);
              color: #f46;
              font-weight: 700;
              font-size: vw(16);
            }
            .shopp-number {
              height: vw(32);
              width: vw(122);
              border: vw(1) solid #f2f2f2;
              border-radius: vw(4);
              display: flex;
              align-items: center;
              .number-plus {
                width: vw(30);
                height: vw(30);
                text-align: center;
                line-height: vw(30);
                font-size: vw(22);
                color: #ccc;
              }
              .number-input {
                height: vw(30);
                width: vw(40);
                padding: 0 vw(10);
                border-width: 0 vw(1);
                border-style: solid;
                border-color: #f2f2f2;
                text-align: center;
                border-radius: 0;
                font-size: vw(16);
                color: #8b8b8b;
              }
              .number-reduce {
                width: vw(30);
                height: vw(30);
                text-align: center;
                line-height: vw(30);
                font-size: vw(22);
                color: #ccc;
              }
            }
          }
        }
      }
    }
  }
  .cart-bottom {
    position: absolute;
    bottom: 50px;
    .cart-dibu {
      width: 100vw;
      height: vw(50);
      .heji {
        font-size: vw(14);
        font-weight: 600;
        font-family: "微软雅黑";
        color: #333;
        height: vw(50);
        line-height: vw(50);
        margin-left: vw(15);
      }
      .jiage {
        color: #f46;
        font-weight: 700;
        font-size: vw(16);
        height: vw(50);
        line-height: vw(50);
      }
      .btn {
        height: vw(50);
        width: vw(110);
        text-align: center;
        line-height: vw(50);
        background-color: #f46;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
      }
    }
  }
}
[v-cloak] {
  display: none;
}
</style>